import React, { useState, useEffect } from "react";
import { useDidShow } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import {
  AtNoticebar,
  AtTabs,
  AtTabsPane,
  AtCard,
  AtActivityIndicator,
} from "taro-ui";
import { useSelector, useDispatch } from "react-redux";
import LineChart from "../../components/LineChart";
import "./index.scss";

export default () => {
  const dispatch = useDispatch();
  const { list, noticeType } = useSelector((state) => state.message);
  const loading = useSelector((store) => store.loading);
  const [current, setCurrent] = useState(0);
  const tabList = [
    { title: "公告", noticeType: 1 },
    { title: "通知", noticeType: 2 },
    { title: "统计", noticeType: 3 },
  ];
  useDidShow(() => {
    dispatch({
      type: "message/questMassage",
    });
  });
  console.log("list", list);
  const handleClick = (val) => {
    console.log(tabList[val]);
    setCurrent(val);
    dispatch({
      type: "message/overrideStateProps",
      payload: {
        noticeType: tabList[val].noticeType,
      },
    });
    dispatch({
      type: "message/questMassage",
    });
  };
  const notice = `${list[0]?.noticeTitle || ""}  ${list[0]?.createBy || ""}  ${
    list[0]?.createTime || ""
  }`;
  return (
    <>
      <AtActivityIndicator
        isOpened={loading.effects["message/questMassage"]}
        mode="center"
        size={32}
        content="加载中..."
      ></AtActivityIndicator>
      <View className="index">
        <AtNoticebar marquee icon="volume-plus">
          {notice}
        </AtNoticebar>
        <AtTabs current={current} tabList={tabList} onClick={handleClick}>
          <AtTabsPane current={current} index={0}>
            {list.length > 0
              ? list?.map((item) => {
                  return (
                    <AtCard
                      note={item.createTime}
                      extra={`${item.createBy}`}
                      title={item.noticeTitle}
                      style={{ marginTop: "2px" }}
                      key={item.mesId}
                    >
                      {item.content}
                    </AtCard>
                  );
                })
              : null}
          </AtTabsPane>
          <AtTabsPane current={current} index={1}>
            {list.length > 0
              ? list?.map((item) => {
                  return (
                    <AtCard
                      note={item.createTime}
                      extra={`${item.createBy} `}
                      title={item.noticeTitle}
                      style={{ marginTop: "2px" }}
                      key={item.mesId}
                    >
                      {item.content}
                    </AtCard>
                  );
                })
              : null}
          </AtTabsPane>
          <AtTabsPane current={current} index={2}></AtTabsPane>
        </AtTabs>
      </View>
    </>
  );
};
